<template>
  <div>
    <el-row v-if="!banner" :style="{height:bannerHeight}" class="bannerCol"></el-row>
    <el-row :gutter="15">
      <el-col :span="8">
        <el-card class="box-card card1">
          <div slot="header" class="clearfix">
            <b class="fontB">消息提醒</b>
          </div>
          <div v-if="remindList.length!==0">
            <div class="news-body" v-if="remindList.length!==0">
              <router-link class="coll" v-for="(item, index) in remindList" :key="index" :to="{path:item.url}" @click.native="updateRemind(item)">
                <span class="collDiv">
                  <i class="collAlink">{{item.name}}</i>
                </span>
                <span class="timeCss">{{item.createDate}}</span>
              </router-link>
            </div>
            <div class="more" @click="toMoreRemind" v-if="remindList.length!==0">MORE</div>
          </div>
          <div class="noneData" v-else>
            <img src='../../assets/img/index/none.jpg' />
            <b>暂无数据</b>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card card2">
          <div slot="header" class="clearfix">
            <b class="fontB">待办事项</b>
          </div>
          <div v-if="todoList.length!==0">
            <div class="news-body">
              <router-link class="coll" v-for="(item, index) in todoList" :key="index" :to="{path:item.url}">
                <span class="collDiv">
                  <i class="collAlink">{{item.businessTypeName}}</i>
                </span>
                <span class="timeCss">{{item.createDate}}</span>
              </router-link>
            </div>
            <div class="more" @click="toMoreTodo" v-if="todoList.length!==0">MORE</div>
          </div>
          <div class="noneData" v-else>
            <img src='../../assets/img/index/none.jpg' />
            <b>暂无数据</b>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card card3">
          <div slot="header" class="clearfix">
            <b class="fontB fl">通知通告</b>
          </div>
          <div v-if="messageList.length!==0">
            <div class="news-body">
              <router-link class="coll" v-for="(item, index) in messageList" :key="index" :to="{path:'/home'}" @click.native="editHandle(item)">
                <span class="collDiv">
                  <i class="collAlink">{{item.notificationTitle}}</i>
                </span>
                <span class="timeCss" v-if="messageList.length!==0">{{item.publishDate}}</span>
              </router-link>
            </div>
            <div class="more" @click="toMoreMessage">MORE</div>
          </div>
          <div class="noneData" v-else>
            <img src='../../assets/img/index/none.jpg' />
            <b>暂无数据</b>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <BaseDialog :visible.sync="visibleDrawer" title="通知通告查看" width="800px" destroyOnClose :containerStyle="{height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px'}" @close="infoClose">
      <info-modal v-model="initData" @close="infoClose" />
    </BaseDialog>
  </div>
</template>

<script>
import { getList, getTodoList, addReadRecord, getTotalCount } from '@/api/cms-api/todoTask/view/index';
import { dictionary } from '@/utils/dictMixin';
import { formatdateByDay } from '@/utils';
import { pageNotificationFeedback } from '@/api/cms-api/notificationDLR/view/index';
import { getLoginUser } from '@/api/cms-api/projectOperating/program/departmentInquire'; //获取登录信息
import infoModal from '../cms-pages/notification/view/info';
import { mapMutations } from "vuex";
export default {
  name: 'Dashboard',
  mixins: [dictionary],
  components: {
    infoModal
  },
  props: {
    banner: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      fetchApi: '',
      fetchParams: {},
      visibleDrawer: false,
      initData: {},
      remindList: [],
      todoList: [],
      messageList: [],
      params: {
        pageNum: 1,
        currentPage: 1,
        pageSize: 5,
        limit: 20,
        pageNum: 1,
        size: 20
      },
      NoReadRemindParams: {
        pageNum: 1,
        currentPage: 1,
        pageSize: 5,
        limit: 20,
        current: 1,
        size: 20,
        viewStatus: 10041002
      },
      messageOemParams: {
        pageNum: 1,
        currentPage: 1,
        pageSize: 5,
        limit: 20,
        pageNum: 1,
        size: 20,
        status: '25641002'
        //statuss: "25641001,25641002"
      },
      messageDealerParams: {
        pageNum: 1,
        currentPage: 1,
        pageSize: 5,
        limit: 20,
        pageNum: 1,
        size: 20,
        status: '25641002'
      },
      loginUser: '',
      initData: {},
      messageSize: 0,
      todoSize: 0,
      remindSize: 0,
      bannerHeight: 250,
    };
  },
  created() {
    this.dataSource();
  },
  mounted() {
    const windowH = document.body.clientHeight - 400
    if (windowH > 260) {
      this.bannerHeight = windowH + 'px'
    } else {
      this.bannerHeight = '260px'
    }
  },
  methods: {

    async dataSource() {
      // this.loginUser = await getLoginUser({});

      await this.getRemindList();

      // await this.getTodoList();
      let type = ''
      if (this.loginUser != '') {
        type = this.loginUser.data.dataType;
      }
      await this.getMessageList(type);

      // await this.getInfoTotal();
    },
    async getInfoTotal() {
      var res = await getTotalCount(this.params);
      if (res.resultCode == 200) {
        this.remindSize = res.data.remindCount;
        this.todoSize = res.data.todoCount;
      }
    },

    async getRemindList() {
      var res = await getList(this.NoReadRemindParams);

      if (res.resultCode == 200) {
        for (var i = 0; i < res.data.records.length; i++) {
          var resultObj = {};
          resultObj.createDate = formatdateByDay(res.data.records[i].createdAt);
          resultObj.businessTypeName = this.createDictText(res.data.records[i].businessType, '2585');
          resultObj.url = '/' + res.data.records[i].menu_url;
          resultObj.name = res.data.records[i].taskMsg;
          resultObj.taskId = res.data.records[i].todoTaskId;
          resultObj.viewStatus = res.data.records[i].viewStatus;
          this.remindList.push(resultObj);

        }

        //  this.todoList = res.data.records;
      }
    },

    async getTodoList() {
      var res = await getTodoList(this.params);

      if (res.resultCode == 200) {
        for (var i = 0; i < res.data.records.length; i++) {
          var resultObj = {};
          resultObj.createDate = formatdateByDay(res.data.records[i].createdAt);
          resultObj.businessTypeName = this.createDictText(res.data.records[i].businessType, '2585');
          resultObj.url = '/' + res.data.records[i].menu_url;

          this.todoList.push(resultObj);
        }
      }
    },

    async getMessageList(type) {
      this.messageList = [];

      if (type == 10461003) {
        var res = await pageNotificationFeedback(this.messageOemParams);
      } else {
        var res = await pageNotificationFeedback(this.messageDealerParams);
      }

      if (res.resultCode == 200) {
        for (var i = 0; i < res.data.records.length; i++) {
          var resultObj = {};
          resultObj.publishDate = formatdateByDay(res.data.records[i].publishDate);
          resultObj.notificationTitle = res.data.records[i].notificationTitle;
          resultObj.notificationId = res.data.records[i].notificationId;
          resultObj.notificationType = res.data.records[i].notificationType;
          resultObj.publisStatus = res.data.records[i].publisStatus;
          resultObj.publishOrgId = res.data.records[i].publishOrgId;
          resultObj.publishOrgName = res.data.records[i].publishOrgName;
          resultObj.publishPerson = res.data.records[i].publishPerson;
          resultObj.publishPersonName = res.data.records[i].publishPersonName;
          resultObj.urgency = res.data.records[i].urgency;

          this.messageList.push(resultObj);
        }
        //  this.messageList = res.data.records;
        //  console.log('aaaa',this.messageList);
        // this.messageList.push(res.data.records);
        this.messageSize = res.data.total;
      }
    },
    updateRemind(val) {
      if ((val.viewStatus = 10041002)) {
        var params = {
          todoTaskId: val.taskId
        };

        var res = addReadRecord(params);
        //    this.visibleDrawer = true;
      }
    },
    toMoreTodo() {
      this.$router.push({ path: '/todoTask/todo/index' });
    },
    toMoreRemind() {
      this.$router.push({ path: '/todoTask/Message/index' });
    },
    toMoreMessage() {
      if (this.loginUser.data.dataType == 10461003) {
        //车厂
        this.$router.push({ path: '/notification/view/index' });
      } else {
        //经销商
        this.$router.push({ path: '/notificationDLR/view/index' });
      }
    },
    editHandle(row) {
      this.initData = {
        type: 'show', // add-edit-show
        notificationId: row.notificationId,
        id: 1001
      }; //行id
      this.visibleDrawer = true;
    },

    infoClose(rData) {
      this.visibleDrawer = false;
      this.getMessageList(this.loginUser.data.dataType);

      // if (rData.type === 'refresh') {
      //   // 重新加载
      //   this.fetchParams = { ...this.fetchParams };
      // }
    }
  }
};
</script>

<style scoped lang="less">
.bannerCol {
  width: 100%;
  height: 250px;
  margin-bottom: 15px;
  background: url('../../assets/img/login1.jpg') no-repeat 10% center;
  background-size: 100% auto;
}
.text {
  font-size: 14px;
}
.card1 /deep/ .el-card__header {
  background: url('../../assets/img/index/title1.jpg') no-repeat right top #a64451;
}
.card2 /deep/ .el-card__header {
  background: url('../../assets/img/index/title2.jpg') no-repeat right top #dfc9b2;
}
.card3 /deep/ .el-card__header {
  background: url('../../assets/img/index/title3.jpg') no-repeat right top #636363;
}
/deep/ .el-card__body {
  padding: 0px;
}
.news-body {
  padding: 0px 20px;
  margin: 5px 0px;
  height: 120px;
  overflow: hidden;
}
/deep/ .el-card__header {
  padding: 15px 20px;
  background-size: auto 100% !important;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  clear: both;
}
.gray {
  color: rgba(172, 187, 204, 1);
  font-size: 14px;
}
.box-card {
  height: 375px;
  width: 100%;
}
.fontB {
  font-weight: 700;
  font-size: 15px;
  color: #fff;
}
.fl {
  float: left;
}
.coll {
  cursor: pointer;
  width: 100%;
  display: block;
  background: #fff;
  height: 30px;
  line-height: 30px;
  position: relative;
  overflow: hidden;
}
.collDiv {
  margin-right: 80px;
  display: block;
  overflow: hidden;
}
.collAlink {
  width: 100%;
  display: block;
  height: 30px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
}
.timeCss {
  position: absolute;
  background: #fff;
  top: 0px;
  right: 0px;
  display: block;
  width: 80px;
  height: 30px;
  text-align: right;
}
.more {
  text-align: center;
  font-size: 14px;
  color: #666;
  margin: 0px 20px;
  border-top: #ddd solid 1px;
  height: 37px;
  cursor: pointer;
  line-height: 37px;
}
.el-badge__content {
  background: @primaryColor;
}
.noneData {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  height: 185px;
  flex-direction: column;
}
.noneData img {
  width: 60px;
  margin-bottom: 15px;
}
.noneData b {
  font-size: 12px;
  color: #a1a1a1;
  display: block;
}
</style>
